<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="预约成功"></c-nav-bar>
		<view class="status">
			<image src="https://i.ringzle.com/file/20231106/ac95adc5300448b68ca243f555f72674.png"></image>
			<text>预约成功</text>
		</view>
		<view class="pre_item">
			<text>预约订单号</text>
			<text>{{item.orderCode}}</text>
		</view>
		<view class="pre_item">
			<text>预约停车场</text>
			<text>{{item.from}}-{{item.park}}</text>
		</view>
		<view class="pre_item">
			<text>车牌号码</text>
			<text>{{item.licence}}</text>
		</view>
		<view class="pre_item">
			<text>预约入场时间</text>
			<text>{{item.inTime}}</text>
		</view>
		<view class="pre_item">
			<text>预约离场时间</text>
			<text>{{item.outTime}}</text>
		</view>
		<view class="pre_item">
			<text>预约停车时间</text>
			<text>{{item.parkHours}}小时</text>
		</view>
		<view class="btns">
			<view class="b_my" @tap="toMyYy">我的预约</view>
			<view class="b_back" @tap="returnHome">返回首页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item:null
			}
		},
		onLoad(option) {
			if(option.item){
				this.item = JSON.parse(option.item);
				this.item.parkHours = Math.ceil(new Date(this.item.outTime).getHours()-new Date(this.item.inTime).getHours());
			}
		},
		methods: {
			toMyYy(){
				uni.navigateTo({
					url:'/pagesIndex/parkingService/myAppointment'
				})
			},
			returnHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		&>view{
			width: 100%;
		}
		.status{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 65rpx 0;
			border-bottom: 1rpx solid rgba(112, 112, 112, .1);
			image{
				width: 96rpx;
				height: 96rpx;
			}
			text{
				font-size: 32rpx;
				font-family: PingFang-SC-Bold;
				font-weight: bold;
				color: #111111;
				margin-top: 14rpx;
			}
		}
		.pre_item{
			width: calc(100% - 48rpx);
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid rgba(112, 112, 112, .1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				&:first-child{
					color: #333333;
				}
				&:last-child{
					color: #111111;
				}
			}
		}
		.btns{
			width: calc(100% - 24rpx);
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 60rpx 12rpx 0;
			&>view{
				width: calc(50% - 58rpx);
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 46rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				letter-spacing: 2rpx;
			}
			.b_my{
				border: 4rpx solid #007A69;
				background: #007A69;
				color: #FFFFFF;
			}
			.b_back{
				border: 4rpx solid #007A69;
				color: #007A69;
			}
		}
	}
</style>